<template>
    <div class="container">
      <div class="cans-box" ref="canxBox">
      <canvas ref="cans" class="canvas" id="can" ></canvas>
      </div>
    </div>
</template>
<script>
export  default {
    data() {
      return {
        cans:null,
        context: null
      }
    },
  mounted() {
     this.drawPlant()
  },
  methods: {
      init() {
        this.$nextTick(_=>{
          const parent = this.$refs['canxBox']
          this.cans = this.$refs['cans'];
          console.log(parent.offsetWidth, parent.offsetHeight)
          this.cans.width = parent.offsetWidth;
          this.cans.height = parent.offsetHeight;
          this.context = this.cans.getContext('2d');
          this.context.beginPath();
          this.context.moveTo(20, 20);
          this.context.lineTo(200, 20);
          this.context.lineTo(300, 40);
          this.context.lineWidth = 5;
          this.context.strokeStyle = '#f00';
          this.context.lineCap = 'round'
          this.context.stroke();

          // 矩形
          this.context.strokeStyle = '#f0f';
          this.context.strokeRect(340, 30, 100, 200)

          // 填充矩形
          this.context.fillStyle = '#faa';
          this.context.fillRect(450, 30, 100, 200)

          // rect画矩形方式
          this.context.beginPath();
          this.context.strokeStyle = '#998';
          this.context.fillStyle = '#223';
          this.context.rect(560, 30, 100, 200);
          this.context.fill()
          this.context.stroke()

          // 镂空
          this.context.clearRect(570, 40, 80, 50)

          // 画圆
          this.context.beginPath()
          this.context.strokeStyle = '#955566';
          this.context.arc(800, 100, 50, 0, 180*Math.PI/180, true)
          // this.context.closePath()
          this.context.stroke()

          // 再画一个圆
          this.context.beginPath()
          this.context.strokeStyle = '#955566';
          this.context.arc(900, 100, 50, 0, 180*Math.PI/180, true)
          // this.context.closePath()
          this.context.stroke()

          // 描边字
          this.context.beginPath()
          this.context.font = '60px 隶书';
          this.context.lineWidth = 2;
          this.context.strokeStyle = '#0a0'
          this.context.strokeText('哈哈哈O(∩_∩)O哈哈~', 850, 150)

          // 填充字
          this.context.fillStyle = 'pink'
          this.context.fillText('如果当时', 850, 220)



          const image = new Image()
          image.src = require('@/assets/images/user.jpg');
          image.onload = ()=>{
            this.context.beginPath()
            this.context.arc(110, 320, 100, 0, 360*Math.PI/180, true)
            this.context.closePath()
            this.context.clip()
            this.context.drawImage(image, 10, 220, 200, 200);
            // this.context.drawImage(image, 200, 220, 200, 200);
          }
        })
      },
      drawPlant() {
        const parent = this.$refs['canxBox'];
        this.cans = this.$refs['cans'];
        this.cans.width = parent.offsetWidth;
        this.cans.height = parent.offsetHeight;
        this.context = this.cans.getContext('2d');

        function PlantCl({x, y, sx, sy, size, color}) {
          this.x = x;
          this.y = y;
          this.sx = sx;
          this.sy = sy;
          this.size = size;
          this.color = color;
        }

        const plant = [];
        const initPlant = ()=>{
          const x = Math.random() * this.cans.width;
          const y = Math.random() * this.cans.height;
          const sx = Math.random() * 2 + 3;
          const sy = Math.random() * 2 + 2;
          const size = Math.random() * 10;
          const color = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, ${Math.random()})`;
          plant.push({x, y, sx, sy, size, color})
        }

        const draw = () => {
          this.context.clearRect(0, 0, this.cans.width, this.cans.height);
          for(let i = 0;i<plant.length;i++) {
            this.context.beginPath()
            this.context.fillStyle = plant[i].color;
            this.context.arc(plant[i].x, plant[i].y, plant[i].size, 0, Math.PI*2, false);
            this.context.fill();
            plant[i].x -= plant[i].sx;
            plant[i].y += plant[i].sy;
            if(plant[i].x < 0 || plant[i].y > this.cans.height) {
              plant.splice(i, 1)
              i--
            }
          }

          requestAnimationFrame(draw)
        }

        setInterval(initPlant, 50);
        draw()
      }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .cans-box {
    width: 100%;
    height: 100%;
  }
  .canvas {
      width: 100%;
      height: 100%;
      background: #000000;
  }
}
</style>
